<template>
  <div class="data-time">
    <div class="item-list">
      <el-form
        :inline="true"
        @submit.prevent
      >
        <el-form-item :label="$t('dataAnalysis.statisticalTime')+':'">
          <div class="title-right">
            <el-select
              v-model="dateValue"
              style="width:100px;"
              @change="onSetDateRange(dateValue)"
            >
              <el-option
                v-for="item in dateOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <span
              v-if="dateValue === 1"
              class="title-time"
            >{{ nowDate }}</span>
            <button
              v-if="dateValue === 1"
              data-v-3baf97fc
              class="el-button el-button--text el-button--small"
              type="button"
              @click="flushDateTime"
            >
              {{ $t('dataAnalysis.refresh') }}
            </button>
            <span
              v-if="dateValue === 2 || dateValue === 3"
              class="title-time"
            >{{ dateRange[0] }} - {{ dateRange[1] }}</span>
          </div>
          <div
            v-if="dateValue === 4"
            class="title-picker"
          >
            <el-date-picker
              v-model="dateRange[0]"
              style="width: 150px;"
              type="date"
              :placeholder="$t('dataAnalysis.selectDate')"
              :picker-options="PickerOptions"
              :disabled-date="onDateDisabled"
              @change="onHandleRangeFour()"
            />
          </div>
          <div
            v-if="dateValue === 5"
            class="title-picker"
          >
            <el-date-picker
              v-model="preMonth"
              style="width: 150px;"
              type="month"
              :placeholder="$t('dataAnalysis.selectMonth')"
              :picker-options="monthPickerOptions"
              @change="onChangeMonth()"
            />
          </div>
        </el-form-item>
      </el-form>
    </div>
    <!-- /商品概况列表 -->
  </div>
</template>

<script setup>
import moment from 'moment'
const emit = defineEmits(['changeDateType', 'changeDateRange', 'nowTime'])
const dateRange1 = ref([])// 商品整体概况的时间选择范围
const PickerOptions = reactive({
  disabledDate (time) {
    const date = moment().add(-1, 'days').startOf('days')
    return (
      time.getTime() > date.valueOf()
    )
  }
})
const monthPickerOptions = reactive({
  disabledDate (time) {
    const month1 = moment().startOf('month')
    return (
      time.getTime() > month1.valueOf()
    )
  }
})
const dateOptions = [
  {
    label: $t('dataAnalysis.todayRealTime'),
    value: 1
  },
  {
    label: $t('dataAnalysis.nearly7'),
    value: 2
  },
  {
    label: $t('dataAnalysis.nearly30'),
    value: 3
  },
  {
    label: $t('dataAnalysis.naturalDay'),
    value: 4
  },
  {
    label: $t('dataAnalysis.naturalMonth'),
    value: 5
  }
]
const dateRange = ref([])
const preMonth = ref('') // 前一个月
onMounted(() => {
  flushDateTime()
})
const dateValue = ref(1)
watch(dateRange1, () => {
  emit('changeDateType', dateValue.value)
  emit('changeDateRange', dateRange1.value)
}, { deep: true })

/**
 * 刷新时间
 */
const nowDate = ref('')

const prodData = reactive({
  prodName: null, // 商品名称
  dateValue: null, // 时间的选择
  dateRange1: null, // 时间区间
  dataForm: {
    group: null,
    status: null
  }, // 筛选信息
  form: {
    saleIndex: [''], // 销售指标
    serviceIndex: [''] // 服务指标
  }, // 指标选择信息
  data: [] // 数据
}) // 商品 概况列表
const flushDateTime = () => {
  const date = new Date()
  nowDate.value = moment(date).format('LL')
  dateRange1.value = [moment(date).startOf('days').format('LL'), nowDate.value]
  prodData.dateRange1 = dateRange1.value
}
// 对可选日进行判断
const onDateDisabled = (time) => {
  return time.getTime() > moment().add(-1, 'days').valueOf() // 之后不可选
}
/**
 * 1:今天 2: 近七天 3:近30天 4:昨天 5:自然月(前一个月如当前月为7月，自然月为6月)
 */
const onSetDateRange = (val) => {
  const date = new Date()
  let startDay = null
  let endDay = null
  prodData.dateValue = val
  if (val === 1) {
    dateRange1.value = [moment().startOf('days').format('LL'), nowDate.value]
    prodData.dateRange1 = dateRange1.value
    return
  } else if (val === 2) {
    startDay = -7
    endDay = -1
  } else if (val === 3) {
    startDay = -30
    endDay = -1
  } else if (val === 4) {
    startDay = -1
    endDay = -1
  } else if (val === 5) {
    preMonth.value = onGetPreMonth(moment().add(-1, 'month'))
    return
  } else {
    return
  }
  // 开始时间
  const startTime = moment(date).add(startDay, 'days').startOf('days')
  // 结束时间
  const endTime = moment(date).add(endDay, 'days').endOf('days')
  dateRange.value = [startTime.format('L'), endTime.format('L')]
  dateRange1.value = [startTime.format('LL'), endTime.format('LL')]
  prodData.dateRange1 = dateRange1.value
}

/**
 * 选择时间
 */
const onChangeMonth = () => {
  // 月的开始结束时间
  if (preMonth.value) {
    const date = moment(preMonth.value)
    const timeStar = moment(date).startOf('month').format('LL')
    const timeEnd = moment(date).endOf('month').format('LL')
    dateRange1.value = [timeStar, timeEnd]
  } else {
    dateRange1.value = ['1971-01-01 00:00:00', '1971-01-01 00:00:00']
  }
  prodData.dateRange1 = dateRange1.value
}
/**
 * 获取前一个月的时间
 */
const onGetPreMonth = (date) => {
  if (!date) {
    date = new Date()
  }
  // 月的开始时间
  const timeStar = moment(date).startOf('month').format('LL')
  // 月的结束时间
  const timeEnd = moment(date).endOf('month').format('LL')
  dateRange1.value = [timeStar, timeEnd]
  prodData.dateRange1 = dateRange1.value
  return moment(date).format('L')
}
/**
 * 当dateRange == 4 监听dateRange[0]的变化
 */
const onHandleRangeFour = () => {
  if (dateRange.value[0]) {
    const start = moment(dateRange.value[0]).startOf('days')
    const end = moment(start).endOf('days')
    dateRange1.value = [start.format('LL'), end.format('LL')]
  } else {
    dateRange1.value = ['1971-01-01 00:00:00', '1971-01-01 00:00:00']
  }
  prodData.dateRange1 = dateRange1.value
}
defineExpose({
  dateRange1, dateValue
})
</script>

<style lang="scss" scoped>
.data-time {
  .item-list {
    vertical-align: middle;
   :deep(.el-form-item)  {
      margin-bottom: 0;
    }
  }
  .title-right {
    text-align: right;
    display: inline;
  }
  .title-picker {
    display: inline;
  }
  .title-time {
    padding-left: 8px;
    color: #999999;
  }
}
</style>
